<template>
	<view class="center">
		<view class="tab">
			<view class="tabBars" v-for="(item,index) in tabBars" @click="tabChange(index)" :style="tabStyle(index)">
				{{item}}
				<view class="tabBottom" :style="tabBottomStyle(index)"> </view>
			</view>
		</view>
		<skeleton :loading="loading" v-if="list.length>0">
			<template>
				<view class="list" v-for="(item,index) in list" :key="index" @click.prevent="detaile(item.id,index)">
					<view class="list_top">
						<view class="list_serviceName">
							{{item.serviceName + '/' + item.userName}}
						</view>
						<view class="list_status" :style="statusColor(item.status)">
							{{status(item.status)}}
						</view>
					</view>
					<view class="list_split">

					</view>
					<view class="list_name">
						<image src="../../../static/icon/order/time.png" alt="">{{item.scheduleTime}}
					</view>
					<view class="list_name">
						<image src="../../../static/icon/order/address.png" alt="" style="height: 36rpx; top: 6rpx;">
							<view class="">
								{{item.address}}
							</view>
					</view>
					<view class="list_number">
						订单编号：{{item.number}}
					</view>
					<view class="list_price">
						￥{{item.price}}
					</view>
					<view class="list_bottom" v-show="btnText(item.status)">
						<view class="list_detaile one" v-show="item.status==4" @click.stop="feedback(item,index)">反馈
						</view>
						<view class="list_detaile" :style="signStyle(item.status,item.sign)"
							@click.stop="check(item,index)">{{btnText(item.status,item.sign)}}</view>
					</view>
				</view>
			</template>

			<!-- 加载更多 h5端底部导航会遮盖住它 -->
			<view style="background: rgba(216, 216, 216, 0);" v-if="isReachBottom && list.length!=0">
				<uni-load-more :status="more" @clickLoadMore="loadMore"></uni-load-more>
			</view>
			<!-- 无订单 -->

		</skeleton>
		<view class="none" v-if="list.length<1" style="padding-top: 180rpx;">
			<image src="../../../static/none/order.png" mode=""></image>
			<view class="noneTitle" style="text-align:center;">暂无订单~</view>
		</view>
		<!-- 反馈弹窗 -->
		<view class="feedback" @touchmove.prevent.stop="bindTouchmove()" v-show="feedbackShow">
			<view class="dialog">
				<view class="dialog_title">
					反馈原因
				</view>
				<view class="dialog_content">
					<view class="dialog_content_title">
						备注原因：
					</view>
					<view class="">
						<textarea name="dialog_content" class="dialog_content_msg" placeholder="请填写备注"
							auto-height="true" placeholder-class="placeholder" id="" maxlength="100"
							v-model="feedbackVal"></textarea>
						<view class="dialog_content_tip">
							提交成功后，平台会在3个工作日内与您联系核对！
						</view>
					</view>
				</view>
				<view class="dialog_footer">
					<view class="dialog_footer_left" style="border-right: 1rpx solid #E5E5E5;"
						@click="feedbackCancel()">取消</view>
					<view class="dialog_footer_right" style="color: #3c8eff;" @click="feedbackConfirm()">提交</view>
				</view>
			</view>
		</view>
		<uni-confirm :show="confirmShow" :title="confirmTitle" :content="confirmContent" @cancel="bindBtn('cancel')"
			@confirm="bindBtn('confirm')">
		</uni-confirm>
		<!-- //点击返回顶部 -->
		<back-top :scrollTop='scrollTop'></back-top>
	</view>
</template>

<script>
	import {
		selectOrderList,
		urgeCloseAnAccount,
		nurseUpdateOffOrder,
		selectOrderNum
	} from '@/apis/line-order/index.js'
	import uniLoadMore from '@/components/uni-ui/uni-load-more/uni-load-more.vue';
	import uniConfirm from '@/components/uni-ui/uni-confirm/uni-confirm.vue';
	import backTop from '../../../components/uni-ui/back-top/back-top.vue';
	import skeleton from '@/components/common/skeleton/line-order.vue'
	import refresh from '@/components/common/refresh/index.vue';
	import {
		requestAndroid
	} from '@/common/js/location.js';
	export default {
		data() {
			return {
				isReachBottom: false, //底部loding判断
				more: 'loading', //more/loading/noMore
				text: '', //confirm输入文字
				confirmShow: false,
				confirmTitle: '订单核对',
				confirmContent: '请确保收益金额与实际收益保持一致，如金额有误，请联系平台！核对成功即表示金额无误，将无法进行修改，请仔细核对！',
				feedbackShow: false, //反馈
				feedbackVal: '', //反馈内容
				list: [],
				show: false,
				number: '',
				id: '',
				index: '',
				tabBars: ['全部', '待核对', '已核对', '已结算'],
				//判断tab切换样式
				tabNum: 0,
				scrollTop: 0, //下滑高度
				page: {
					nurseId: this.$store.state.userInfo.id,
					pageNum: 0,
					pageSize: 7,
					status: ''
				},
				loading: true, //骨架屏
			}
		},

		onShow() {
			if (this.list.length < 1) {
				this.clearStatus()
				this.getList()
				this.more = 'more'
			}
			uni.$once('state', (state) => {
				console.log('接收到的参数', state)
				this.list[state.index].status = state.status
				if (state.sign) {
					this.list[state.index].sign = state.sign
				}
			})
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onHide() {},
		//下拉刷新
		onPullDownRefresh() {
			this.clearStatus();
			this.list = [];
			this.getList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 300);
		},
		// 页面触底
		onReachBottom() {
			console.log('页面触底了---');
			if (this.more == 'noMore') return;
			this.isReachBottom = true;

			// 显示加载更多数据
			this.more = 'loading';
			this.page.pageNum++;
			this.getList();
		},
		components: {
			uniLoadMore,
			backTop,
			uniConfirm,
			skeleton

		},
		computed: {
			tabStyle(index) {
				let num = this.tabNum
				return function(index) {
					if (num == index) {
						return `font-weight: 500;color: #333333;`
					} else {
						return false
					}

				}
			},
			tabBottomStyle(index) {
				let num = this.tabNum
				return function(index) {
					if (num == index) {
						return `display:block;`
					} else {
						return false
					}

				}
			},
			signStyle(status, sign) {
				return function(status, sign) {
					if (status === 6 && sign) {
						return 'background:#D8D8D8 ;'
					} else if (status && !sign) {
						return 'background-color: #3C8EFF;'
					}
				}
			},

		},
		methods: {
			tabChange(index) {
				this.clearStatus();
				this.list = [];
				this.loading = true
				if (this.tabNum == index) return
				this.tabNum = index
				if (index == 0) {
					this.page.status = ''
				} else if (index == 1) {
					this.page.status = 4
				} else if (index == 2) {
					this.page.status = 6
				} else if (index == 3) {
					this.page.status = 5
				}
				this.getList()
			},
			//查看详情
			detaile(id, index) {
				console.log(id)
				uni.navigateTo({
					url: '../line-detail/line-detail?offOrderId=' + id + '&index=' + index
				})
			},
			//反馈
			feedback(item, index) {
				this.refash(false)
				this.number = item.number
				this.id = item.id
				this.index = index
				this.feedbackShow = true
				console.log(111111)
			},
			//反馈取消
			feedbackCancel() {
				this.refash(true)
				this.feedbackShow = false
			},
			//反馈确认
			async feedbackConfirm() {
				if (this.feedbackVal.length < 5 || this.feedbackVal.length > 99) {
					uni.showToast({
						icon: 'none',
						title: '请输入5-100个文字',
					})
					return
				}
				let res = await nurseUpdateOffOrder({
					number: this.number,
					status: 7,
					otherInfo: this.feedbackVal,
					id: this.id
				})
				if (res.success) {
					this.list[this.index].status = 7
					uni.showToast({
						icon: 'none',
						title: '提交成功！',
					})
					this.feedbackVal = ''
				} else {
					uni.showToast({
						icon: 'none',
						title: '提交失败，请稍后重试',
					})
				}
				this.refash(true)
				this.feedbackShow = false
			},

			//订单操作
			check(item, index) {
				this.number = item.number
				this.id = item.id
				this.index = index
				if (item.status == 4) {
					this.refash(false)
					this.confirmShow = true
				} else if (item.status == 6) {
					if (item.sign) {
						return
					}
					this.urge()
				} else if (item.status == 7) {
					this.callLoto()
				}
			},
			//订单核对确认弹框
			bindBtn(type) {
				if (type == 'confirm') {
					this.confirm()
				}
				this.refash(true)
				this.confirmShow = false
			},
			//核对确认
			async confirm() {
				let res = await nurseUpdateOffOrder({
					number: this.number,
					status: 6,
					id: this.id
				}) //核对确认
				console.log('核对确认', res)
				if (res.success) {
					this.list[this.index].status = 6
					uni.showToast({
						icon: 'none',
						title: '核对成功！',
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '核对失败，请稍后重试',
					})
				}
			},
			//催结算
			async urge() {
				let res = await urgeCloseAnAccount({
					number: this.number,
					id: this.id
				})
				if (res.success) {
					uni.showToast({
						icon: 'none',
						title: res.codeMsg.msg,
					})
					this.list[this.index].sign = 1

				} else {
					uni.showToast({
						icon: 'none',
						title: '催促失败，请稍后重试',
					})
				}
				console.log('催结算', res)
			},
			//联系机构
			callLoto() {
				requestAndroid('android.permission.CALL_PHONE', '通话权限')
				this.$store.dispatch('call')
			},
			//获取线下订单列表
			async getList() {
				let res = await selectOrderList(this.page)
				console.log(this.page, '获取........')
				if (res.success) {
					if (res.object.records.length > 0) {
						if (this.isReachBottom) {
							this.list.push(...res.object.records);
						} else {
							this.list = res.object.records;
						}
					} else {
						if (this.isReachBottom) {
							this.more = 'noMore';
							this.page.pageNum = 1;
						} else {
							this.list = [];
							this.isReachBottom = false;
						}
					}
				}
				this.loading = false
			},
			// 清除状态
			clearStatus() {
				this.page.pageNum = 1;
				this.isReachBottom = false;
				this.more = 'more';
			},
			// 日期转换
			formatTime(time) {
				let date = new Date(time)
				let res = time.split(' ')
				let a = res[0].split('/')
				let b = a[0] + '.' + a[1] + '.' + a[2]
				res[0] = b + this.formatDate(date.getDay())
				res[1] = this.dayTime(date) + res[1].slice(0, 5)
				return res[0] + ' | ' + res[1]
			},
			formatDate(time) {
				let title = ''
				switch (time) {
					case 1:
						title = '周一';
						break;
					case 2:
						title = '周二';
						break;
					case 3:
						title = '周三';
						break;
					case 4:
						title = '周四';
						break;
					case 5:
						title = '周五'; //服务中
						break;
					case 6:
						title = '周六'; //退款中
						break;
					case 0:
						title = '周日';
						break;
				}
				return title
			},
			orderStatus(status) {
				let title = ''
				switch (status) {
					case 2:
						title = '抢单';
						break;
					case 3:
						title = '已抢单';
						break;
				}
				return title
			},
			dayTime(date) {
				let hoursTip = ''
				if (date.getHours() >= 0 && date.getHours() < 12) {
					hoursTip = "上午"
				} else if (date.getHours() >= 12 && date.getHours() < 18) {
					hoursTip = "下午"
				} else {
					hoursTip = "晚上"
				}
				return hoursTip
			},
			status(status) {
				if (status == 4) {
					return '待核对'
				} else if (status == 5) {
					return '已结算'
				} else if (status == 6) {
					return '已核对'
				} else if (status == 7) {
					return '核对异常'
				}
			},
			statusColor(status) {
				if (status == 4) {
					return 'color:#FF4F4F ;'
				} else if (status == 5) {
					return 'color:#333333 ;'
				} else if (status == 6) {
					return 'color:#333333 ;'
				} else if (status == 7) {
					return 'color:#FF6A00 ;'
				}
			},
			btnText(status, sign) {
				if (status == 4) {
					return '确认'
				} else if (status == 5) {
					return ''
				} else if (status == 6) {
					if (sign) {
						return '已催促'
					} else {
						return '催结算'
					}
				} else if (status == 7) {
					return '联系平台'
				}
			},

			refash(change) {
				getCurrentPages()[getCurrentPages().length - 1].$getAppWebview().setStyle({
					pullToRefresh: {
						support: change,
						style: plus.os.name === 'Android' ? 'circle' : 'default'
					}
				});
			},
			bindTouchmove() {
				uni.stopPullDownRefresh()
			},
			loadMore() {
				console.log('下拉加载')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.center {
		// height: 100vh;
		min-height: 100vh;
		background: rgba(243, 246, 246, 1);
		width: 100%;
		padding-top: 88rpx;

	}

	.feedback {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 100;
		transition: visibility 200ms ease-in;
		background-color: rgba(0, 0, 0, 0.38);

		.dialog {
			position: absolute;
			z-index: 99;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			transition: transform 0.3s;
			width: 540rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			background-color: #fff;
			overflow: hidden;
			transition: opacity 200ms ease-in;
			padding-top: 30rpx;

			.dialog_title {
				text-align: center;
				line-height: 48rpx;
				font-size: 32rpx;
				margin-bottom: 28rpx;
			}

			.dialog_content {
				display: flex;
				justify-content: space-around;
				padding: 0 30rpx;

				.dialog_content_title {
					width: 140rpx;
					font-weight: 400;
					font-size: 24rpx
				}

				.dialog_content_tip {
					font-size: 24rpx;
					line-height: 36rpx;
				}

				textarea {
					max-width: 338rpx;
					font-size: 24rpx;
					min-height: 98rpx;
					background: rgba(0, 0, 0, 0.03);
					border-radius: 4rpx;
					padding: 4rpx;
					margin-bottom: 16rpx;
				}

				.placeholder {
					padding-left: 20rpx;
					font-size: 20rpx;
					color: #999999;
					line-height: 28rpx;
				}

				.dialog_content_tip {
					width: 338rpx;
					height: 60rpx;
					font-size: 20rpx;
					color: #FF6A00;
					line-height: 30rpx;
				}
			}

			.dialog_footer {
				margin-top: 32rpx;
				position: relative;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: #333;
				font-size: 32rpx;
				display: flex;
				flex-direction: row;
				border-top: 1rpx solid #E5E5E5;

				.dialog_footer_left,
				.dialog_footer_right {
					position: relative;
					flex: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					height: 88rpx;
					font-size: 32rpx; //确认取消大小
					line-height: 88rpx;
					text-align: center;
					background-color: #fff;
					color: #333;
					border-radius: 8rpx;
				}
			}
		}
	}

	.tab {
		width: 100%;
		height: 88rpx;
		display: flex;
		background-color: #ffffff;
		padding: 0 58rpx;
		box-sizing: border-box;
		justify-content: space-between;
		position: fixed;
		// top: 80rpx;
		top: 0;
		left: 0;
		z-index: 50;

		.tabBars {
			height: 88rpx;
			line-height: 88rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(0, 0, 0, 0.38);
			position: relative;

			.tabBottom {
				width: 100%;
				height: 6rpx;
				background-color: #3C8EFF;
				border-radius: 9rpx;
				display: none;
				position: absolute;
				bottom: 0rpx;
				left: 0rpx;
				transition: all 10s ease-in-out;
			}
		}
	}

	.list {
		margin: 0 auto;
		width: 710rpx;
		background: #FFFFFF;
		padding: 28rpx 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		// display: flex;
		// justify-content: space-between;
		margin-top: 16rpx;

		.list_top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.list_serviceName {
				font-size: 32rpx;
				color: #333333;
			}

			.list_status {
				font-size: 28rpx;
				color: #333333;
			}
		}

		.list_split {
			width: 634rpx;
			height: 2rpx;
			background: rgba(240, 240, 240, 0.6);
			margin: 28rpx auto;
		}

		.list_name {
			margin-bottom: 16rpx;
			font-size: 28rpx;
			position: relative;
			box-sizing: border-box;
			color: #666666;

			image {
				float: left;
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
				display: block;
				top: 8rpx;
			}

			view {
				overflow: hidden; //超出的文本隐藏
				text-overflow: ellipsis; //用省略号显示
				white-space: nowrap; //不换行
			}
		}

		.list_number {
			padding-left: 52rpx;
			overflow: hidden; //超出的文本隐藏
			text-overflow: ellipsis; //用省略号显示
			white-space: nowrap; //不换行
			color: #666666;

		}

		.list_price {
			font-size: 36rpx;
			color: #FF4F4F;
			line-height: 50rpx;
			text-align: right;
			margin-bottom: 16rpx;
		}

		.list_bottom {
			display: flex;
			justify-content: flex-end;

			.list_detaile {
				width: 160rpx;
				height: 72rpx;
				background: #3C8EFF;
				border-radius: 20rpx;
				line-height: 72rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 28rpx;
				margin-left: 24rpx;
			}

			.one {
				background: #FFFFFF;
				border: 2rpx solid #999999;
				color: #999999;
			}
		}
	}

	.none {
		text-align: center;
		padding-top: 180rpx;

		image {
			width: 442rpx;
			height: 354rpx;
			display: block;
			margin: 0 auto;
			margin-bottom: 80rpx;
		}

		.noneTitle {
			font-size: 36rpx;
			font-weight: 500;
			color: #3E3E3E;
			text-align: center;
		}
	}
</style>